<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <span style="color: red;">说明：单位：万元
        </span>
        <a-row>
          <a-col :xs="12" :sm="12">
            <a-form-model-item label="年度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="year">
              <j-dict-select-tag type="list" v-model="model.year" dictCode="year" placeholder="请选择年度"
                                 @change="handleYearChange" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="基本收支情况总表" :key="refKeys[0]" :forceRender="true">
        <j-editable-table :ref="refKeys[0]" :loading="cwJbszqkzbTable.loading" :columns="cwJbszqkzbTable.columns"
                          :dataSource="cwJbszqkzbTable.dataSource" :maxHeight="300" :disabled="formDisabled" :rowNumber="true"
                          :rowSelection="true" :actionButton="true" />
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>
import { mapState } from 'vuex'
import { FormTypes, getRefPromise, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'CwJbszqkzbZhuForm',
  mixins: [JEditableTableModelMixin],
  components: {},
  data() {
    return {
      currentScene: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: { year: '' }, // 初始为空，由watch同步全局年度
      validatorRules: {
        unit: [
          { required: true, message: '请输入单位!' },
        ],
        year: [
          { required: true, message: '请输入年度!' },
        ],
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      refKeys: ['cwJbszqkzb',],
      tableKeys: ['cwJbszqkzb',],
      activeKey: 'cwJbszqkzb',
      // 基本收支情况总表
      cwJbszqkzbTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '支出类型',
            key: 'disbursementType',
            type: FormTypes.select,
            dictCode: "disbursement_type",
            width: "150px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '项目',
            key: 'project',
            type: FormTypes.input,
            dictCode: "project",
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '其中：财政',
            key: 'financial',
            type: FormTypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '其中：非财政',
            key: 'nonFinancials',
            type: FormTypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '测算依据',
            key: 'calculationBasis',
            type: FormTypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '填报说明',
            key: 'cwTbsm',
            type: FormTypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '排序',
            key: 'cwPx',
            type: FormTypes.input,
            width: "50px",
            placeholder: '请输入${title}',
            defaultValue: '',
            disabled: true
          },
        ]
      },
      url: {
        add: "/cw/cwJbszqkzbZhu/add",
        edit: "/cw/cwJbszqkzbZhu/edit",
        getByYear: "/cw/cwJbszqkzbZhu/queryByYear",
        cwJbszqkzb: {
          list: '/cw/cwJbszqkzbZhu/queryCwJbszqkzbByMainId'
        },
      },
      isManualChange: false, // 标记是否手动修改过表单年度
      formDisabled: this.disabled, // 替换计算属性为响应式变量，初始值继承props
      confirmLoading: false // 补充loading初始值（避免可能的undefined报错）
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    scene: { // 接收 Modal 传递的场景值
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({ globalYear: state => state.app.globalYear })
  },
  watch: {
    // 监听全局年度变化，同步到表单（仅当未手动修改时）
    globalYear(newVal) {
      if (!this.isManualChange) {
        this.model.year = newVal
        // 可选：自动触发年度查询，解开注释即可
        // this.handleYearChange(newVal)
      }
    },
    // 监听表单年度变化，标记是否手动修改
    'model.year'(newVal, oldVal) {
      if (oldVal && newVal !== this.globalYear) {
        this.isManualChange = true // 手动修改后，不再同步全局年度
      }
    },
    // 监听props的disabled变化，同步到本地响应式变量
    disabled(newVal) {
      this.formDisabled = newVal
    }
  },
  created() {
    this.model.year = this.globalYear
    const scene = this.scene; // 接收 Modal 传递的 scene（add/edit）
    this.currentScene = scene; // 存储到本地变量，后续复用
    if (scene=='add'){
      this.handleYearChange(this.model.year)
    }
  },
  methods: {
    async handleYearChange(year) {
      console.log('选择的年度:', year);
      let unit = "";

      if (!year) {
        this.$message.warning('请选择年度');
        return;
      }

      try {
        this.confirmLoading = true;
        const response = await this.$http.get(this.url.getByYear, {
          params: { year: year, unit: unit }
        });

        if (response.success) {
          const { dataList, isExistData, mainId } = response.result;
          console.log('年度数据查询结果:', response.result);
          this.cwJbszqkzbTable.dataSource = dataList || [];

          // 根据数据来源判断：已有数据→编辑模式，默认模板→新增模式
          if (isExistData && mainId) {
            // 编辑模式：设置主表 ID，加载子表数据，切换表单状态
            this.model.id = mainId; // 主表 ID 赋值（编辑接口需要）
            this.formDisabled = false; // 现在操作的是响应式变量，无报错
            // 调用编辑后的子表加载逻辑（复用 editAfter 方法）
            this.editAfter();
            this.$message.success('已加载该年度已有数据，进入编辑模式');
          } else {
            // 新增模式：清空主表 ID，保持子表为默认模板
            this.model.id = ''; // 清空主表 ID，确保走新增接口
            this.$message.success('该年度无已有数据，进入新增模式');
          }
        } else {
          this.$message.error(response.message || '查询年度数据失败');
        }
      } catch (error) {
        console.error('年度查询接口调用失败:', error);
        this.$message.error('查询失败，请稍后重试');
      } finally {
        this.confirmLoading = false;
      }
    },

    addBefore(scene) {
      console.log(scene)
      this.cwJbszqkzbTable.dataSource = []
    },
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      this.$nextTick(() => {
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.cwJbszqkzb.list, params, this.cwJbszqkzbTable)
      }
    },
    //校验所有一对一子表表单
    validateSubForm(allValues) {
      return new Promise((resolve, reject) => {
        Promise.all([]).then(() => {
          resolve(allValues)
        }).catch(e => {
          if (e.error === VALIDATE_NO_PASSED) {
            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
          } else {
            console.error(e)
          }
        })
      })
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)

      return {
        ...main, // 展开
        cwJbszqkzbList: allValues.tablesValue[0].values,
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    close() {
      this.visible = false
      this.$emit('close')
      this.$refs.form.clearValidate();
    },
    // 补充tabs切换方法（原模板引用但未定义，避免报错）
    handleChangeTabs(key) {
      this.activeKey = key
    }
  }
}
</script>

<style scoped></style>